<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				perspective: 800px;
				/*景深*/
			}
			
			.cube {
				position: relative;
				margin: 300px auto;
				height: 200px;
				width: 200px;
				transform-style: preserve-3d;
				/*3d环境*/
				transform-origin: 50% 50% -101px;
			}
			
			.cube div {
				position: absolute;
				height: 200px;
				width: 200px;
				top: 0;
				left: 0;
				border: 2px solid red;
			}
			
			.cube div:nth-child(1) {
				top: -202px;
				transform-origin: bottom;
				/*旋转中心*/
				transform: rotateX(-90deg);
				/*旋转角度*/
			}
			
			.cube div:nth-child(2) {
				top: 202px;
				transform-origin: top;
				transform: rotateX(90deg);
			}
			
			.cube div:nth-child(3) {
				left: -202px;
				transform-origin: right;
				transform: rotateY(90deg);
			}
			
			.cube div:nth-child(4) {
				left: 202px;
				transform-origin: left;
				transform: rotateY(-90deg);
			}
			
			.cube div:nth-child(5) {
				transform: translateZ(202px);
			}
			
			.cube div:nth-child(6) {
				
			}
			.cube:hover{
				animation: rot 2s linear;
			}
			@-moz-keyframes rot{
				from{
					transform:rotateY(0deg) ;
				}
				to{
					transform: rotateY(360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="cube">
			<div>上</div>
			<div>下</div>
			<div>左</div>
			<div>右</div>
			<div>前</div>
			<div>后</div>
		</div>
	</body>

</html>